s
<template>
  <div class="top-navs">
    <div class="container">
      <a-breadcrumb class="bread-crumb">
        <a-breadcrumb-item>当前</a-breadcrumb-item>
        <a-breadcrumb-item>{{ store.currentMenu }}</a-breadcrumb-item>
      </a-breadcrumb>
      <div class="drop-list">
        <a-space wrap :size="16">
          <a-tooltip>
            <template #title>您有{{ todoStore.total }}条待处理内容</template>
            <a-badge :count="todoStore.total">
              <a-avatar size="small">
                <template #icon><UserOutlined /></template>
              </a-avatar>
            </a-badge>
          </a-tooltip>
        </a-space>
        <a-dropdown>
          <span class="dropdown-link" @click.prevent>
            {{ userStore.userName }}
            <DownOutlined />
          </span>
          <template #overlay>
            <a-menu>
              <a-menu-item v-if="userStore.userRole === 'user'">
                <span @click="handleUserInfo">个人中心</span>
              </a-menu-item>
              <a-menu-item v-if="userStore.userRole === 'hr'">
                <span @click="handleTodo">待办</span>
              </a-menu-item>
              <a-menu-item>
                <span @click="handleExit">退出登录</span>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useMenuStore } from '@/stores/menuStore'
import { useUserStore } from '@/stores/userStore'
import { useTodoInfo } from '@/stores/todoSrore'
import { useRouter, useRoute } from 'vue-router'
import { UserOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const store = useMenuStore()
const userStore = useUserStore()
const todoStore = useTodoInfo()

const handleExit = () => {
  localStorage.removeItem('user')
  todoStore.total = 0
  router.push('/login')
}
const handleUserInfo = () => {
  store.currentMenu = '个人中心'
  router.push('/userInfo')
}
const handleTodo = () => {
  store.currentMenu = '待办'
  router.push('/todo')
}
</script>

<style lang="scss" scoped>
.top-navs {
  position: fixed;
  top: 0;
  right: 0;
  left: 210px;
  height: 50px;
  background-color: #f2f2f2;

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    .bread-crumb {
      margin-left: 20px;
    }

    .drop-list {
      margin-right: 20px;

      .dropdown-link {
        display: inline-block;
        margin-left: 8px;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
}
</style>
